<!DOCTYPE html>
<html>
<head>
	<title> 立方体 </title>
	<meta content="text/html" charset="utf-8" />
<style>
	*{margin:0; padding:0;}
	body{perspective:1800px;}
	.box{
		position:relative;
		width:600px; height:600px; margin:0 auto; 
		/* border:1px solid #808040; */
		transform-style:preserve-3d;
		transform:rotateX(60deg) rotateZ(45deg);
	}
/* 大正方形 */
	.box .da{
		position:absolute; top:50%; left:50%; margin-top:-150px; margin-left:-150px;
		width:300px; height:300px;
		border:1px solid #3333ff; border-radius:20px; background:rgba(255,255,255,.7); 
		box-shadow:0 0 10px #4598e2;
		font:30px/300px "Microsoft Yahei"; text-align:center;
		transition:1s ease-in;		/* 过渡 */
	}
	.box .da img{
		width:300px; 
		opacity:0;
		transition:3s;}
/* 大正方形六面定位 */
	.box .top{transform:translateZ(155px);}
	.box .bottom{transform:translateZ(-155px);}
	.box .front{transform:translateY(155px) rotateX(90deg);}
	.box .back{transform:translateY(-155px) rotateX(-90deg);}
	.box .left{transform:translateX(-155px) rotateY(90deg);}
	.box .right{transform:translateX(155px) rotateY(-90deg);}
/* 大正方形过渡 */
	.box:hover .da img{opacity:1;}
	.box:hover .top{
		transform:translateZ(260px);
	}
	.box:hover .bottom{}
	.box:hover .front{
		transform:translateY(310px) translateZ(-155px) rotateX(0deg);
	}
	.box:hover .back{
		transform:translateY(-310px) translateZ(-155px) rotateX(0deg);
	}
	.box:hover .left{
		transform:translateX(-310px) translateZ(-155px) rotateY(0deg);
	}
	.box:hover .right{
		transform:translateX(310px) translateZ(-155px) rotateY(0deg);
	}
/* 小正方形 */
	.box .mini{
		position:absolute; top:50%; left:50%; margin-top:-100px; margin-left:-100px;
		width:200px; height:200px;
		transform-style:preserve-3d;
	}
	.box .mini div{
		position:absolute; top:50%; left:50%; margin-top:-80px; margin-left:-80px;
		width:160px; height:160px; border-radius:5px; overflow:hidden;
		background:rgba(0,200,200,.4);
	}
	.box .mini div img{
		width:160px;
	}
	.box .mini .mTop{
		transform:translateZ(80px);
	}
	.box .mini .mBottom{
		transform:translateZ(-80px);
	}
	.box .mini .mFront{
		transform:translateY(80px) rotateX(-90deg) /* rotateY(90deg) */;
	}
	.box .mini .mBack{
		transform:translateY(-80px) rotateX(90deg) rotateZ(180deg);
	}
	.box .mini .mLeft{
		transform:translateX(-80px) rotateY(90deg) rotateZ(-90deg); 
	}
	.box .mini .mRight{
		transform:translateX(80px) rotateY(-90deg);
	}	
/* 动画 */
	.box:hover .mini{
		animation:mini 8s linear infinite;
	}

	@keyframes mini{
		0%{transform:translateZ(0px) rotateZ(0deg);}
		25%{transform:translateZ(20px) rotateZ(180deg);}
		50%{transform:translateZ(100px) rotateZ(360deg);}
		75%{transform:translateZ(20px) rotateZ(540deg);}
		100%{transform:translateZ(0px) rotateZ(720deg);}
	}
	
</style>
</head>
<body>
	<div class="box">
		<div class="top da">
			<img src="LoL/yxlm.png" alt=""/>
		</div>
		<div class="bottom da">
			<img src="LoL/lks/lks3.png" alt=""/>
		</div>
		<div class="front da">
			<img src="LoL/lks/lks5.png" alt=""/>
		</div>
		<div class="back da">
			<img src="LoL/lks/lks1.png" alt=""/>
		</div>
		<div class="left da">
			<img src="LoL/lks/lks2.png" alt=""/>
		</div>
		<div class="right da">
			<img src="LoL/lks/lks4.png" alt=""/>
		</div>
		<div class="mini">
			<div class="mTop"><img src="LoL/1.png" alt=""/></div>
			<div class="mBottom"><img src="LoL/2.png" alt=""/></div>
			<div class="mFront"><img src="LoL/6.png" alt=""/></div>
			<div class="mBack"><img src="LoL/4.png" alt=""/></div>
			<div class="mLeft"><img src="LoL/5.png" alt=""/></div>
			<div class="mRight"><img src="LoL/3.png" alt=""/></div>
		</div>
	</div>
</body>
</html>